<template>
  <div class="parent">
    <div class="container">
      <div class="video-container">
        <video controls width="100%" height="100%">
          <source :src="videoUrl" type="video/mp4" />
          您的浏览器不支持视频标签。
        </video>
        ZS
      </div>
      <div class="list-container">
        <a-list :data-source="data" item-layout="vertical">
          <template #renderItem="{ item }">
            <a-list-item @click="goToVideo(item.id)">
              <a-list-item-meta :description="item.description">
                <template #title>
                  <a>{{ item.title }}</a>
                </template>
                <template #avatar>
                  <a-avatar :src="require('@/assets/logo.png')" />
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";

const router = useRouter();
const route = useRoute();

// 定义 videoMap 的类型
type VideoMap = {
  [key: string]: string;
};

// 视频数据映射
const videoMap: VideoMap = {
  "1": "@/assets/video.mp4",
  "2": "@/assets/video.mp4",
  "3": "@/assets/video.mp4",
  "4": "@/assets/video.mp4",
};

const videoUrl = ref("");

onMounted(() => {
  const videoId = route.params.videoId as string; // 使用 route.params 获取路由参数
  if (videoId in videoMap) {
    videoUrl.value = videoMap[videoId]; // 根据 videoId 动态设置视频 URL
  } else {
    console.error("Invalid video ID:", videoId);
  }
});

interface DataItem {
  title: string;
  description: string;
  id: string;
}

const data: DataItem[] = [
  {
    id: "1",
    title: "请求后端1",
    description: "1",
  },
  {
    id: "2",
    title: "请求后端2",
    description: "1",
  },
  {
    id: "3",
    title: "请求后端3",
    description: "1",
  },
  {
    id: "4",
    title: "请求后端4",
    description: "1",
  },
];

const goToVideo = (videoId: string) => {
  router.push({ name: "userMange", params: { videoId } }); // 跳转到视频页面
};
</script>

<style scoped>
.parent {
  background: url("@/assets/background.jpg");
}

.container {
  display: flex; /* 使用 Flex 布局 */
  gap: 20px; /* 左右容器之间的间距 */
  transform: scale(0.8);
  right: 500px;
  border: 10px solid #a0afd3; /* 边框宽度、样式和颜色 */
  border-radius: 3px; /* 边框圆角 */
  padding: 20px; /* 内边距 */
}

.video-container {
  width: 800px; /* 左侧框框的宽度 */
  height: 500px; /* 左侧框框的高度 */
  border: 1px solid #ccc; /* 边框样式 */
  border-radius: 8px; /* 边框圆角 */
  overflow: hidden; /* 防止视频溢出 */
}

.list-container {
  flex: 1; /* 右侧列表占满剩余空间 */
}

.list-container .ant-list-item-meta-title a {
  color: white !important; /* 提高优先级 */
}

::v-deep .list-container .ant-list-item-meta-description {
  color: white !important; /* 改变描述文字颜色为白色 */
}
</style>
